<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li>仓库管理</li>
        <li>仓库管理</li>
        <li>修改仓库</li>
    </ul>
</div>
<div class="formbody">
    <form id="systemForm" action="" method="get">
        <table>
            <div class="formtitle"><span>仓库信息</span></div>
            <ul class="forminfo">
                <li>
                    <label>仓库名称</label>
                    <input maxlength="30" name="cName" id="cname" type="text" value="南京21号仓库" class="dfinput"/>
                    <i>必填，不能超过30个字符</i>
                </li>
                <li>
                    <label>仓库地址</label>
                    <input maxlength="50" name="cAddress" id="caddress" type="text" value="江苏南京苏铺路180号泸州花园7栋3单元1801室" class="dfinput"/>
                    <i>必填，不能超过300个字符</i>
                </li>
                <li>
                    <label>所属区域</label>
                    <select class="province" name="province" onchange="provinceChange('')">
                        <!--          <option>请选择</option>-->
                        <!--          <option>北京</option>-->
                        <!--          <option selected="selected">江苏</option>-->
                        <!--          <option>天津</option>-->
                    </select>
                    省
                    <select class="city" name="city">
                        <!--          <option>请选择</option>-->
                        <!--          <option>北京</option>-->
                        <!--          <option selected="selected">南京</option>-->
                        <!--          <option>天津</option>-->
                    </select>
                    市
                    <i>必选</i>
                </li>
                <li>
                    <label>负责人</label>
                    <select name="usre" class="dfselect" id="usre">
                        <!--          <option>请选择</option>-->
                        <!--          <option selected="selected">周仓</option>-->
                        <!--          <option>廖化</option>-->
                        <!--          <option>张昭</option>-->
                    </select>
                    <i>只能是财务部仓库管理员职位</i>
                </li>
                <li>
                    <label>联系方式</label>
                    <input name="phone" id="phone" type="text" value="17370899727" class="dfinput"/>
                    <i>必填，不能超过30个字符</i>
                </li>
                <li>
                    <label>描述</label>
                    <textarea name="details" id="details" class="textinput">天下第一仓</textarea>
                    <i>可选</i>
                </li>
                <li>
                    <label>状态</label>
                    <select name="state" class="dfselect" id="state">
                        <option value="1">可用</option>
                        <option value="0">不可用</option>
                    </select>
                    <i>必选</i>
                </li>
                <li>
                    <label>创建人</label>
                    <input name="users" id="users" type="text" value="马云" readonly="readonly" class="roinput"/>
                    <i>不能编辑</i>
                </li>
                <li>
                    <label>创建时间</label>
                    <input name="creationTime" type="text" id="creationTime" value="2017-11-18 15:36:10" readonly="readonly"
                           class="roinput"/>
                    <i>不能编辑</i>
                </li>
                <li>
                    <label>&nbsp;</label>
                    <input name="" type="button" onclick="submitMessage()" class="btn" value="确定"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="/storage/lists"><input name="" type="button" class="btn" value="返回"
                           onclick="window.location.href='/storage/lists'"/></a>
                </li>
            </ul>
        </table>
    </form>
</div>
<script type="text/javascript" src="../../../static/js/jquery.js"></script>

<script>
    $(function () {
        loadstorage();
    });

    //加载仓管列表
    function getWarehouseGetUsre(selectedUsre) {
        $.ajax({
            url: "/Warehouse/WarehouseGetUsre",
            type: "get",
            dataType: "json",
            success: (pb) => {
                $("#usre").html('')
                pb.data.forEach((item, index) => {
                    if (item.uname != selectedUsre) {
                        $("#usre").append(`<option  value="${item.id}">${item.uname}</option>`)
                    } else {
                        $("#usre").append(`<option  value="${item.id}" selected>${item.uname}</option>`)
                    }
                })
            }
        })
    }

    //全局信息
    window.datas = {
        //地区信息
        addressInfo: [],
    };

    //获取地区信息
    var nowselectCity;
    function getAddressInfo(selected) {
        $.ajax({
            url: "/commonProvince",
            type: "get",
            dataType: "json",
            success: (data) => {
                let selectItem;
                window.datas.addressInfo = data.data;
                $("#province").html('')
                window.datas.addressInfo.forEach((item, index) => {
                    if (item.pname != selected) {
                        $(".province").append(`<option name="${item.id}" value="${item.id}">${item.pname}</option>`)
                    } else {
                        $(".province").append(`<option name="${item.id}" selected value="${item.id}">${item.pname}</option>`)
                        provinceChange(nowselectCity)
                    }
                })
            }
        })
    }

    function provinceChange(selected) {
        let addressInfo = datas.addressInfo;
        let city = [];
        let id = $(".province option:selected").attr("name");
        for (let i = 0; i < addressInfo.length; i++) {
            if (addressInfo[i].id == id) {
                city = addressInfo[i].citys;
                break;
            }
        }
        $(".city").html('')
        // alert(city)
        city.forEach((item, index) => {
            if (item.cname != selected) {
                $(".city").append(`<option value="${item.id}">${item.cname}</option>`);
            } else {
                $(".city").append(`<option value="${item.id}" selected>${item.cname}</option>`);
            }
        })

    }

    //数据回显
    function loadstorage() {
        $.ajax({
            type: "GET",//请求类型
            url: "/Warehouse/WarehouseDetail",//请求的url
            data: {},//请求参数
            dataType: "json",//ajax接口（请求url）返回的数据类型
            success: function (pb) {
                $("#cname").val(pb.data.cname)
                $("#caddress").val(pb.data.caddress)
                $("#phone").val(pb.data.phone)
                $("#details").val(pb.data.details)
                $("#users").val(pb.data.users)
                $("#creationTime").val(pb.data.creationTime)

                getAddressInfo(pb.data.province)
                getWarehouseGetUsre(pb.data.usre)

                nowselectCity=pb.data.city;
                // alert(nowselectCity)
            }
        })
    }

    //更新数据
    function submitMessage() {
        let formArray =$("#systemForm").serializeArray();
        $.ajax({
            url: "/Warehouse/WarehouseUpdate",
            type: "get",
            dataType: "json",
            data: formArray,
            success: (data) => {
                alert(data.msg);
            }
        })
    }

    //手机号格式验证
    let checkPhone = function PhoneFalse() {
        let pattern = /^1[34578]\d{9}$/;
        if (!pattern.test($(this).val())) {
            $(this).css('border', '1px solid red');
            $(this).select();
        }else {
            $(this).css('border', '1px solid black');
        }
    }
    //失焦，聚焦判断；手机邮箱等正则验证
    $('#phone').blur(checkPhone)

</script>
</body>
</html>
